<script setup lang="ts">
import MyDivider from '@/components/MyDivider.vue';
import PictureList from '@/components/PictureList.vue';
import PostList from '@/components/PostList.vue';
import UserList from '@/components/UserList.vue';
import myAxios from '@/plugins/myAxios';
import { message } from 'ant-design-vue';

import { ref, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const activeKey = route.params.category;

const initSearchParams = {
  text: '',
  pageSize: 10,
  pageNum: 1,
  type: activeKey,
};
const searchParams = ref(initSearchParams);

const searchText = ref(route.params.text);

const postList = ref([]);

const userList = ref([]);

const pictureList = ref([]);

// 加载数据

// const loadDataOld = (params: any) => {
//   const postQuery = {
//     ...params,
//     searchText: params.text,
//   }
//   myAxios.post('post/list/page/vo', postQuery)
//     // eslint-disable-next-line @typescript-eslint/no-explicit-any
//     .then((res: any) => { postList.value = res.records; });

//   const userQuery = {
//     ...params,
//     userName: params.text,
//   }
//   myAxios.post('user/list/page/vo', userQuery)
//     // eslint-disable-next-line @typescript-eslint/no-explicit-any
//     .then((res: any) => { userList.value = res.records; });

//   const pictureQuery = {
//     ...params,
//     searchText: params.text,
//   }
//   myAxios.post('picture/list/page/vo', pictureQuery)
//     // eslint-disable-next-line @typescript-eslint/no-explicit-any
//     .then((res: any) => { pictureList.value = res.records; });
// };

// 全部数据加载

// const loadAllData = (params: any) => {
//   const query = {
//     ...params,
//     searchText: params.text,
//   }
//   myAxios.post('search/all', query)
//     // eslint-disable-next-line @typescript-eslint/no-explicit-any
//     .then((res: any) => {
//       postList.value = res.postList;
//       userList.value = res.userList;
//       pictureList.value = res.pictureList;
//     });
// };

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const loadData = (params: any) => {
  const { type } = params;
  if (!type) {
    message.error('请选择搜索类型');
    return;
  }
  const query = {
    ...params,
    searchText: params.text,
  }
  myAxios.post('search/all', query)
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    .then((res: any) => {
      if (type === 'picture') {
        pictureList.value = res.dataList;
        return;
      } else if (type === 'user') {
        userList.value = res.dataList;
        return;
      } else if (type === 'post') {
        postList.value = res.dataList;
        return;
      }
    });
};

// 当 route.query.text 变化时
watchEffect(() => {
  searchParams.value = {
    ...initSearchParams,
    text: route.query.text as string,
    type: route.params.category,
  };
  loadData(searchParams.value);
});

// 首次请求
loadData(initSearchParams);

// 点击搜索按钮
const onSearch = (searchValue: string) => {
  // console.log(searchValue);
  router.push({
    query: {
      ...searchParams.value,
      text: searchValue,
    }
  });
};

const onTabChange = (key: string) => {
  router.push({
    path: `/${key}`,
    query: searchParams.value
  });
};

</script>

<template>
  <div>
    <a-input-search v-model:value="searchText" placeholder="请输入搜索内容" enter-button @search="onSearch" />
    <MyDivider />
    <a-tabs v-model:activeKey="activeKey" @change="onTabChange">
      <a-tab-pane key="post" tab="文章">
        <PostList :post-list="postList" />
      </a-tab-pane>
      <a-tab-pane key="user" tab="用户" force-render>
        <UserList :user-list="userList" />
      </a-tab-pane>
      <a-tab-pane key="picture" tab="图片">
        <PictureList :picture-list="pictureList" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
